import G6 from '@antv/g6';
function plotNetwork(data, containerStr) {
  // console.log(data);
  // const colors = ['#f5222d', '#faad14', '#a0d911', '#13c2c2', '#1890ff', '#b37feb', '#eb2f96'];
  const colors = [
    '#f5222d',
    '#faad14',
    '#a0d911',
    '#13c2c2',
    '#1890ff',
    '#b37feb',
    '#eb2f96',
    '#5b8ff9',
    '#5ad8a6',
    '#5d7092',
    '#f6bd16',
    '#6f5ef9',
    '#6f5ef9',
    '#6dc8ec',
    '#945fb9',
    '#ff9845',
    '#1e9493',
    '#ff99c3',
    '#cdddfd',
    '#cdf3e4',
    '#ced4de',
    '#fcebb9',
    '#d3cefd',
    '#d3eef9',
    '#decfea',
    '#ffe0c7',
    '#ffe0ed',
    '#bbdede',
  ];
  const nodes = data.nodes;
  const clusterMap = new Map();
  let clusterId = 0;
  nodes.forEach(function (node) {
    // cluster
    if (node.cluster && clusterMap.get(node.cluster) === undefined) {
      clusterMap.set(node.cluster, clusterId);
      clusterId++;
    }
    const cid = clusterMap.get(node.cluster);
    if (!node.style) {
      node.style = {};
    }
    node.style.fill = colors[cid % colors.length];
    // node.style.stroke = strokes[cid % strokes.length];
    node.style.stroke = colors[cid % colors.length];
  });
  const container = document.getElementById(containerStr);
  const width = container.scrollWidth;
  const height = container.scrollHeight || 200;
  const graph = new G6.Graph({
    container: containerStr,
    width,
    height,
    modes: {
      default: ['drag-canvas', 'drag-node'],
    },
    layout: {
      type: 'fruchterman',
      gravity: 10,
      speed: 10,
      clustering: true,
      workerEnabled: true,
    },
    animate: true,
    defaultNode: {
      size: 8,
    },
    defaultEdge: {
      // style: {
      //   endArrow: {
      //     path: 'M 0,0 L 8,4 L 8,-4 Z',
      //     fill: '#e2e2e2',
      //   },
      // },
      // size: 1,
      // type: 'quadratic',
    },
  });
  graph.data(data);
  graph.render();

  const edgeItems = graph.getEdges();
  edgeItems.forEach(function (e) {
    let lineWidth = 0.9;
    let strokeOpacity = 1;
    let beginColor = '#5b8c00'; // green
    let endColor = '#5b8c00'; // red
    // let beginColor = '#aaa'; // green
    // let endColor = '#aaa'; // red

    if (e._cfg.model.signed === '-') {
      beginColor = '#ff4d4f'; // green
      endColor = '#ff4d4f'; // red
    }
    if (!e._cfg.model.isBalanceEdge) {
      lineWidth = 3;
    }
    let stroke = 'l(0) 0:' + beginColor + ' 1:' + endColor;
    e.update({
      style: {
        lineWidth,
        strokeOpacity,
        stroke,
      },
    });
  });
  graph.paint();

  if (typeof window !== 'undefined') {
    window.onresize = () => {
      if (!graph || graph.get('destroyed')) return;
      if (!container || !container.scrollWidth || !container.scrollHeight) return;
      graph.changeSize(container.scrollWidth, container.scrollHeight);
    };
  }
}
export default plotNetwork;
